import React, { FC, useEffect } from "react";
import MyTitle from "./../../components/Title";
import {
  Row,
  Col,
  List,
  Space,
  Avatar,
  Tag,
  Button,
  Tooltip,
  Popconfirm,
} from "antd";
import { inject, observer } from "mobx-react";
import {
  MessageOutlined,
  LikeOutlined,
  StarOutlined,
  SearchOutlined,
  FormOutlined,
  DeleteOutlined,
  AimOutlined,
} from "@ant-design/icons";
import { baseURL } from "../../api/request";
import { roleList } from "../../utils";
import { ajax } from "./../../api/index";
import { useNavigate } from "react-router-dom";
const IconText: FC<any> = ({ icon, text }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);
const AdviseList: FC<any> = ({ uinfo, data }) => {
  const { adviseList, getAdviseListAsync, getAdviseList } = data;
  const { userInfo } = uinfo;
  const navigate = useNavigate();
  useEffect(() => {
    getAdviseListAsync();
  }, []);
  const confirmDel = async (item: any) => {
    let { code, result } = await ajax.advisedelete({
      _id: item._id,
    });
    // 前端也要删除
    if (code == 200) {
      var list = adviseList.filter((v: any) => v._id != item._id);
      getAdviseList(list);
    }
  };
  const gotoUpdateItem = (item: any) => {
    navigate("/main/advise/update/" + item._id);
  };
  const gotoDetailItem = (item: any) => {
    navigate("/main/advise/detail/" + item._id);
  };
  return (
    <div>
      <MyTitle text="意见列表"></MyTitle>
      <Row style={{ marginTop: 20 }}>
        <Col></Col>
      </Row>
      <Row>
        <Col span={18}>
          <List
            itemLayout="vertical"
            size="large"
            pagination={{
              onChange: (page) => {
                console.log(page);
              },
              pageSize: 3,
            }}
            dataSource={adviseList}
            footer={
              <div>
                <b>以上为系统意见</b>
              </div>
            }
            renderItem={(item: any, index) => (
              <List.Item
                key={item.title}
                actions={[
                  <IconText
                    icon={StarOutlined}
                    text="156"
                    key="list-vertical-star-o"
                  />,
                  <IconText
                    icon={LikeOutlined}
                    text="156"
                    key="list-vertical-like-o"
                  />,
                  <IconText
                    icon={MessageOutlined}
                    text="2"
                    key="list-vertical-message"
                  />,
                ]}
                extra={
                  <div>
                    <Tooltip placement="top" title={"查看"}>
                      <Button
                        shape="circle"
                        onClick={() => gotoDetailItem(item)}
                        icon={<AimOutlined />}
                        size="small"
                      ></Button>
                    </Tooltip>
                    {userInfo.role >= item.info.role && (
                      <Popconfirm
                        title="确定删除吗?"
                        onConfirm={() => confirmDel(item)}
                        okText="删除"
                        cancelText="取消"
                      >
                        <Tooltip placement="top" title={"删除"}>
                          <Button
                            shape="circle"
                            icon={<DeleteOutlined />}
                            style={{ margin: "0 20px" }}
                            size="small"
                          ></Button>
                        </Tooltip>
                      </Popconfirm>
                    )}
                    {userInfo.role >= item.info.role && (
                      <Tooltip placement="top" title={"修改"}>
                        <Button
                          shape="circle"
                          onClick={() => gotoUpdateItem(item)}
                          icon={<FormOutlined />}
                          size="small"
                        ></Button>
                      </Tooltip>
                    )}
                  </div>
                }
              >
                <List.Item.Meta
                  avatar={
                    <Avatar src={item.info.avatar.replace(/public/, baseURL)} />
                  }
                  title={<a href={item.href}>{item.info.username}</a>}
                  description={
                    roleList.find((v) => v.value == item.info.role)?.label
                  }
                />
                {/* react 实现 v-html  */}
                <p>{item.title} </p>
                <div dangerouslySetInnerHTML={{ __html: item.content }}></div>
                <p>
                  {item.category.map((l: any, i: any) => {
                    return (
                      <Tag key={i} style={{ marginRight: 5 }} color="#f50">
                        {l}
                      </Tag>
                    );
                  })}
                </p>
              </List.Item>
            )}
          ></List>
        </Col>
      </Row>
    </div>
  );
};

export default inject("data", "uinfo")(observer(AdviseList));
